Skip to main content

模版语法

文本插值​

一句话记忆：使用双括号包裹一个变量，如 {{ name }}

打开 Basic.vue 文件，我们可以在 template 标签下编写一些 HTML 内容。

<template>
  <h1>三木</h1>
</template>

页面展示内容如下。

Untitled

但是有些情况下，需要展示Js的变量，比如我们希望这个名称可能是动态变化的，比如未来从数据库中获取。

我们将template增加 <h1>名称是：{{ name }}</h1>，其中的name用双括号包裹，这样就表示这里的name是一个变量

script增加data属性，将name赋值三木，完整代码如下

<script>
  export default {
    name: 'Basic',
    data() {
      return {
        name: '三木',
      };
    },
  };
</script>

<template>
  <h1>三木</h1>
  <h1>名称是：{{ name }}</h1>
</template>

<style scoped></style>

此时我们的页面展示如下，名称是后面的“三木”，是通过变量name动态获取的。

Untitled

原始 HTML​

一句话记忆：v-html 等于一段 html 代码

双大括号会将变量转换为纯文本，但有时我们希望显示转义后的 html 代码。这时，需要使用 v-html 进行绑定。

比如，给 data 增加一个属性

data() {
    return {
      ...
      html: "<h1>我是三木</h1>",
    };
  },

template 增加以下代码

<template>
  ... {{ html }}
  <div v-html="html"></div>
</template>

此时我们页面结果如下：第一段代码将 HTML 标签字符串化，第二段代码会显示成h1的样式。

Untitled

Attribute 绑定​

一句话记忆：给 dom 节点增加属性

我们可以给 dom 增加任意的属性，比如 id、name、age 等等，只要在属性之前增加v-bind即可，

<div v-bind:id="2"></div>
<div v-bind:name="name"></div>

id写死一个值是2，name绑定了前面data下面的 name 变量，再看看HTML的DOM的展示结果如下

Untitled

代码改成如下

<div :id="2"></div>
<div :name="name"></div>

JS 表达式​

除了，可以在双括号中绑定一些简单的属性，还可以支持单一表达式

{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('')
}}
<div :id="`list-${id}`"></div>
{{ formatDate(date) }}